import headerImgUploader from "../Components/headerImgUploader";
import validate from '../../libs/validate';

export default {
    components: {
        headerImgUploader
    },
    computed: {
        user() {
            return this.$store.state.user.data
        }
    },
    data() {
        const validatePassCheck = (rule, value, callback) => {
               if (value === '') {
                   callback(new Error('请再次输入密码'));
               } else if (value !== this.liveAnchorForm.password) {
                   callback(new Error('两次输入的密码不一样！'));
               } else {
                   callback();
               }
           };
        return {
            liveAnchorTableColumns: [{
                'title': '图片',
                'align': 'center',
                'key': 'icon_url',
                'isImg': true,
                'width': 80
            }, {
                'title': '主播姓名',
                'align': 'center',
                'key': 'chinese_name',

            },{
                'title': '主播昵称',
                'align': 'center',
                'key': 'nickname',

            }, {
                'title': '账号',
                'align': 'center',
                'key': 'loginid',

            }, {
                'title': '手机号',
                'align': 'center',
                'key': 'mobilenum',
            }, {
                'title': '操作',
                'align': 'center',
                'key': 'action',
                'action': true,
                'width':130
            }],
            searchKey: '',
            pageCount: 0,
            pageNum: 1,
            pageLoading: false,
            liveAnchorList: [],
            selectData: '',
            selectOrg:{
                uuid:''
            },
            showModal: false,
            uploadImgCallbackPath: '',
            liveAnchorForm: {
                chinese_name: '',
                nickname:'',
                loginid:'',
                password:'',
                checkpsw:'',
                mobilenum:'',
                email:'',
                type:'',
                intro:'',
                remark:'',
            },
            liveAnchorFormRules: {
                chinese_name: [{
                    required: true,
                    validator: validate.name,
                    trigger: 'blur'
                }],
                nickname: [{
                    required: true,
                    validator: validate.name,
                    trigger: 'blur'
                }],
                loginid: [{
                    required: true,
                    validator: validate.id,
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    validator: validate.password,
                    trigger: 'blur'
                }],
                mobilenum: [{
                    required: true,
                    validator: validate.tel,
                    trigger: 'blur'
                }],
                email: [{
                    required: false,
                    type: 'email',
                    message: '请输入正确的email',
                    trigger: 'blur'
                }],
                checkpsw: [{
                    required: true,
                    validator: validatePassCheck,
                    trigger: 'blur'
                }],
            },
            uploadImgData:{},
            imgUploadUrl:'',
            modalLoading:true,
            liveOrgList:[{
                title: '全部',
                expand: true,
                children: [],
                uuid: '',
                selected: true
            }]
        }
    },
    methods: {
        /**
         * @param {Boolean} type
         * 设置确定按钮loading动画，传True或者False
         */
        changeLoadingStatus(type) {
            if (!type) {
                this.modalLoading = false;
            }
            this.$nextTick(() => {
                this.modalLoading = true;
            });
        },
        // doSearch() {
        //     this.pageNum = 1;
        //     this.getLiveAnchorList();
        // },
        // clearSearch() {
        //     this.searchKey = '';
        //     this.pageNum = 1;
        //     this.getLiveAnchorList();
        // },
        changePage(num) {
            this.pageNum = num;
            this.getLiveAnchorList();
            document.querySelector('.single-page-con').scrollTo(0, 0)

        },
        getLiveOrgList() {
            this.http.post(this.postUrl.doGetLiveOrgListUrl, {
                token: this.user.tokenList[0],
                all:'1'
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                    data.data.forEach(item=>{
                        item.title = item.name
                    })
                    this.$set(this.liveOrgList[0],'children',JSON.parse(JSON.stringify(data.data)))
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                // this.errorHandle()
            })
        },

        getLiveAnchorList(orgUUid) {
            if (this.pageLoading) return
            this.pageLoading = true;
            this.http.post(this.postUrl.doGetAnchorListUrl, {
                token: this.user.tokenList[0],
                pageNum: this.pageNum,
                pageSize: 20,
                live_institution_uuid:'' || orgUUid,
                key_word: this.searchKey
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                    this.pageCount = data.data.totalRow;
                        this.liveAnchorList = JSON.parse(JSON.stringify(data.data.list));
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            }).then(() => {
                this.pageLoading = false;
            })
        },
        uploadImgSuccess(data) {
            this.uploadImgCallbackPath = data;
        },
        createImgUploadData(){
            //上传图片
            let uploadImgData = {
                token: this.user.tokenList[0],
                type: 1,
                app_key: this.http.app_key,
                timestamp: "2017-09-26 15:52:28"
            }
            let uploadImgDataSign = this.http.getSign({
                type: 1,
                token: this.user.tokenList[0]
            });
            uploadImgData.sign = uploadImgDataSign;
            this.uploadImgData = uploadImgData;
        },
        openAddModal(){
            if(!this.selectOrg.uuid){
                this.$Notice.warning({
                    title:'注意',
                    desc:"请先选择一个机构！"
                })
                return;
            }
            this.showModal = true;
        },
        clickOK(){
            this.changeLoadingStatus(true)
            if (!this.uploadImgCallbackPath) {
                this.changeLoadingStatus(false);
                this.errorHandle("请先上传图片！");
                return;
            }

            this.$refs.liveAnchorForm.validate(valid=>{
                if(!valid){
                    this.changeLoadingStatus(false);
                    return
                }
                let postData =JSON.parse(JSON.stringify(this.liveAnchorForm));
                postData.icon_url = this.uploadImgCallbackPath;
                postData.token = this.user.tokenList[0];
                if(this.liveAnchorForm.password != this.selectData.password){
                    postData.is_update_pwd = '1'
                }
                if(this.selectData){
                    postData.uuid = this.selectData.uuid;
                }else{
                    postData.live_institution_uuid = this.selectOrg.uuid

                }
                delete postData.checkpsw
                this.http.post(this.postUrl.doAddOrEditAnchorUrl,postData).then((data)=>{
                    if(data.code > -1){
                        this.$Notice.success({
                            title: this.selectData?'修改成功！':'新增成功！'
                        })
                        this.showModal = false;
                        this.getLiveAnchorList(this.selectOrg.uuid);
                    }else{
                        this.errorHandle(data.msg)
                    }
                    this.changeLoadingStatus(false)

                },()=>{
                    this.errorHandle()
                    this.changeLoadingStatus(false)

                })
            })
        },
        deleteAnchor(param){
            this.http.post(this.postUrl.deleteAnchorUrl,{
                token:this.user.tokenList[0],
                uuid:param.uuid
            }).then((data)=>{
                if(data.code > -1){
                    this.$Notice.success({
                        title: '操作成功！',
                    })
                    this.getLiveAnchorList(this.selectOrg.uuid);
                }else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            })
        },
        goLiveOrg(){
            this.$router.push({
                name:'live-ctrl-org'
            })
        },
        onSelectChange(e){
            console.log(e);
            this.selectOrg = e[0];
            this.pageNum = 1;
            this.getLiveAnchorList(e[0].uuid)
        }
    },
    created() {
        this.liveAnchorTableColumns.forEach(item => {
            if (item.isImg) {
                item.render = (h, param) => {
                    return h("img", {
                        attrs: {
                            src: this.postUrl.imgPath + param.row.icon_url
                        },
                        style: {
                            width: "40px",
                            height: "40px",
                            "margin-top": "5px"
                        }
                    });
                };
            }
            if (item.action) {
                item.render = ((h, param) => {
                    return h('div', [
                        h('Button', {
                            class: 'table-action-box',
                            style: {
                                'margin-right': '10px',
                            },
                            props: {
                                type: "primary",
                                icon: 'edit',
                                shape:"circle"

                            },
                            on: {
                                click: () => {
                                    this.selectData = param.row;
                                    this.uploadImgCallbackPath = this.selectData.icon_url;
                                    this.liveAnchorForm =  {
                                        chinese_name: this.selectData.chinese_name,
                                        nickname:this.selectData.nickname,
                                        loginid:this.selectData.loginid,
                                        password:this.selectData.password,
                                        checkpsw:this.selectData.password,
                                        mobilenum:this.selectData.mobilenum,
                                        email:this.selectData.email,
                                        type:this.selectData.type,
                                        intro:this.selectData.intro,
                                        remark:this.selectData.remark,
                                        live_institution_uuid:this.selectData.live_institution_uuid
                                    }
                                    this.showModal = true;
                                }
                            }
                        }),
                        h(
                            "Poptip", {
                                props: {
                                    confirm: true,
                                    title: "您确定要删除主播?",
                                    transfer: true
                                },
                                on: {
                                    "on-ok": () => {
                                        // this.ignoreFeedback(param.row)

                                         this.deleteAnchor(param.row)
                                    }
                                }
                            }, [
                                h('Button', {
                                    class: 'ignore-btn',
                                    style: {
                                    },
                                    props: {
                                        type: "error",
                                        icon: 'trash-b',
                                        shape:"circle"
                                    },
                                    on: {
                                        click: () => {

                                        }
                                    }
                                })
                            ]
                        )
                    ])
                })

            }
        })
        if (this.user) {
            this.getLiveAnchorList()
            this.getLiveOrgList()
            this.createImgUploadData()
        }

    },
    watch: {
        user(val, old) {
            if (!old && val) {
                this.getLiveAnchorList()
                this.getLiveOrgList()
                this.createImgUploadData()

            }
        },
        showModal(val){
            if(!val){
                this.selectData = '';
                this.uploadImgCallbackPath = "";
                this.liveAnchorForm =  {
                    chinese_name: '',
                    nickname:'',
                    loginid:'',
                    password:'',
                    checkpsw:'',
                    mobilenum:'',
                    email:'',
                    type:'',
                    intro:'',
                    remark:'',
                }
                this.$refs.liveAnchorForm.resetFields()

            }
        }
    }
}
